Web Designer Wall
Tutorials

Cross-Browser CSS Gradient

By Aigars Silkalns 1 min read

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.

For Webkit Browsers

The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a linear gradient from top (#ccc) to bottom (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

webkit gradient

For Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

firefox gradient

For Internet Explorer

The following filter wlil only be read by IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

ie gradient filter

Cross-Browser CSS Gradient (demo)

Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn’t support the feature.

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

gradient box

CSS Gradient Dropdown Menu

Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)

css gradient dropdown

Internet Explorer Limitations

Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Final Remarks

Please note not all browsers support CSS gradient. To be safe, you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.

Keep reading

Tutorials

Using HTML Symbol Entities

Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as…

2 min read

Tutorials

Style Your Ordered List

By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial…

1 min read

340 comments from the archive

  4. Thanks for this great post :-) the example image of the CSS Gradient Dropdown Menu is very nice.

  5. While internet explorer doesn’t fully support gradient angle it does have the GradientType property.

    It has two possible values:
    0 vertical (default)
    1 horizontal

    When you apply a filter in internet explorer it renders the text in that element with jaggys instead of using cleartype. Your menu has this problem on rollover.

    Also see Gradient Filter on msdn

  9. Good stuff! This is what I did and it works great. I even went a step further and built a IE-specific stylesheet for the filter gradient fix. I’ve seen some examples use “background-image” instead of “background”. I would think “background” is right, and this hopefully confirms it. Any evidence that points to “background-image” being a better solution?

  11. Very nice tut, i think this make my work a bit faster in future.
    Thx for sharing this!

  12. Nice tutorial, thanks! Just and FYI for folks out there. The demo only works properly in IE 8. Gradient works in IE 7, the drop-down has issues, and his doesn’t work in IE 6 at all (which really should die but some clients refuse to upgrade).

  13. The biggest issue with using gradients for IE is that it breaks cleartype which makes the text ugly and unreadable half the time. The problem showed up in IE7 but it wasn’t fixed in IE8. Microsoft should just quit trying to make browsers already.

  14. “It should only be used for enhancing the layout.” I think this is right on. CSS3 only styling should be an enhancement until the majority of browsers are using CSS3. well put

  15. It’s not really cross-browser. It doesn’t work on latest version of Opera 10.50. It’s clear that the CSS code considers only FF, Chrome, Safari and IE and forgets Opera :)

  16. If you’re using multiple effects with IE which rely on filter:, they all need to be in the same filter: declaration. I had different classes for rotation, shadows, etc, but IE would only apply the last applicable class in the stylesheet. I had to add IE classes for each combination of filter: rules.

    It’s too bad Opera hasn’t implemented CSS gradients, especially with Opera Mini topping the iPhone app store charts.

  18. Oh my goodness, why can’t Firefox use the same syntax as Webkit chose? Way to make this harder than it should be, guys. :-/

  20. Filter = Proprietary code = bad. It is not a standard and shouldn’t be used. Some things really don’t need to be cross browser – if you have to use a gradient in IE, fall back to an image background.

  21. Very useful! It dispenses with some gradient images.
    Thanks for great tuts.

  22. With now more than 100 million Opera users, this can’t be considered a cross-browser technique.

  25. Took 32 screenshots across Windows Xp, Vista, Win7, and Ubuntu and OSX and made a slideshow so you can see the rendering on the popular browsers on each platform. See results here.

  27. Wow, never realized this feature. Thanks for sharing! Will use this in the future.

  28. Nice article (especially about ie filter).

    Although there is a little typo error:
    “The following filter WILL only be read by IE:” ;-)

  29. Great post! I wanted to learn more about this technique, it’ll very useful for a project I’m working on. CSS3 is truly awesome! Thanks for explaining it so well.

  32. Excellent post! I have one point, though.

    It seems to me that the IE filter only works for vertical gradients, thus limiting the amount of quasi-CSS3 available in IE. If there is another way of rotating the gradient for IE, that would be convenient to know, but I would wonder how many developers and designers care about CSS3 effects in IE…

    Again, excellent post, and I LOVE the demo!

  33. Could you use this together with jQuery’s ‘support’ to display more traditional techniques for non-supported browsers?

  36. Thanks!

    I love that css is finally making it easy to do things that could only be done graphically before… It’s a great age for website design!

  37. Nice blog!! ajax and wordpress, this is an inspiration!!

  38. If you want an appropriate fallback for browsers that aren’t supporting any of these techniques simply define a plain background-color before you define the gradients (e.g. background-color:#ccc;)

  40. Excellent technique. Cross browser is getting easier all the time. I’d be interested to see numbers on cross-browser frontend development time. I know I’ve spent waaaaaaay to many hours on it myself.

  42. This is great! I have been looking for a way to take gradients from images to code. I knew you could do it, but my knowledge of “heavy code” is pretty limited. I love it though.. thanks for sharing!

  43. Hi, dear!
    I really loved this post! I was looking for something like this. But…. I was testing and in my Opera, and it didn´t appear anything… =(

    Someone could give a hand on it?

    Tks!!!

  44. I wonder whether it is possible to get gradient in horizontal direction?
    Thanks.

  45. I try to follow the examples already. Results have recently been encouraging.

  47. Wonderful! Trying it on a website.. will update if I come up with anything new. Thanks!

  52. @Michael Mior, the introduction states “but now with the Firefox 3.6+…” — it isn’t supported in any older Firefox version.

  54. Im using Coda for codding in my 2 macs, but this gradient thing didnt seem to work. All my browsers re updated! I get a STRANGE result!!!

  56. io solitamente acquisto on line , mi piace perche acquisto da casa , ho molta scelta e posso confrontare i prezzi , l ultimanente ho acquistato una FOTOCAMERA REFLEX NIKON su http://www.tecmania.it , unsa samsung , ricevuta a casa , bellissimo ……

  58. -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′)”; /* for IE8 */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′); /* for IE6 & 7 */

  59. This is great, but when it first loads the gradient does not fill up the whole screen initially. It vertically repeats the gradient like venetian blinds (different row heights across browsers) and then when the rest of the page loads it corrects itself. Unfortunately I can’t show you what is happening because the site is not live. It’s like I need a preloader or something. I tried a div that covers the page and then hides it with body onLoad, but that didn’t work. Any ideas?

    1. Ming, did you get an answer to your venetian blind gradient problem? My cross-browser gradient works fine if I set it from topright to bottomleft, but on straight topto bottom, I get the blinds. And it doesn’t go away. Help?

  62. Nice, thanks. Always like the use of a good gradient from time to time. Was taught in university not to use gradients in design for some reason but I like them and think they can work well when implemented correctly and appropriately.

  64. The above code is very good for all website developer but, I just want to know can we use this code in horizontal way?
    If it is possible to make it. thata will be great code forsoever for all website developer.

    Thanks,
    Ganesh

  65. filter: progid:DXImageTransform.Microsoft.gradient in script bellow not work in IE 7:
    table = document.createElement(‘table’);
    table.setAttribute(‘cellspacing’,’0′);
    table.setAttribute(‘cellpadding’,’2′);
    tbody = document.createElement(“tbody”);

    table.appendChild(tbody);
    tr = document.createElement(‘tr’);
    tr.setAttribute(‘valign’,’top’);

    tr.style.cssText= “filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=” #B554FF”, endColorstr=” #B554BB”)”;
    tbody.appendChild(tr);

    Could you help to solve the issue above?
    Many thanks,
    Pao,

  68. the ie 7.0.6 doesn’t work with the crazy grediant which applied to the “tr”
    Anybody know how solve it?

  70. gr8 post
    thanks for sharing
    anyway whole web design is going to dynamic now will be more fun to worl with CSS 3 & HTML 5

  71. Thanks for sharing going to use on my site on the next update here Thanks again!

  75. you forgot one thing… IE 8 changed the property to -ms-filter and the filter command is in quotes.

  76. SVG in combination with background-size is missing. If done correctly, it should work in Opera.

  77. thanks for the tutorial. but chrome (chromium) 6+ (that only i test) have small bug in inset.

  80. Why did you even bother to check IE6? Anyone who still uses IE6 (and is not being forced to) is, quite frankly, a moron.

  83. @Danny Internets: Really? 3.5.10 is the current version of Firefox? What about 3.6.6? BTW, Firefox 4 beta is out…

  85. Not really “cross-browser” if your proposed hack doesnt work in Opera. ;)

    If you’re a professional web designer: stop hacking and wait till an implementation is released by W3C.

  87. Excellent and informative. Thanks for taking the time, don’t worry about those who don’t appreciate the effort.

  90. Hahahhahaah. IE 6.
    it uses the filter:?

    anyway, really helpful.
    i just searched for gradients with alpha support, but rgba and #00000000 in the filter did it.

  92. Thanks, exactly this is I was looking for! One mention: the picture gradient is also cross browser and can be dithered which is a litle bit better.

  93. Thanks so much for these tips. It’s incredible that IE doesn’t support so many things when it comes to CSS. I hope soon they realize the importance of this. Why do they refuse to cooperate with things that other browsers support?

  95. Filter doesn’t seem to work in IE. What ever I change the hexadecimal value too it still renders blue.

  96. When this filter is applied in IE, text smoothing is disabled (tested in IE8), which is not so nice for users with text smoothing enabled as it’s a very obvious difference in text rendering, the best option here may be to have a fallback background image for browsers other than Firefox, Chrome, and Safari. This would be done by specifying the background image as the background property as the fallback in the example above.

  102. Wow the CSS Gradient Dropdown Menu example is amazing. Too bad it’s hosed in IE 7- but absolutely amazing that you can achieve that w/out the use of images.

    Great work!

  104. Awesome post, just a small bug I’ve discovered on IE 8 – Gradients with a border cut out the bottom border for some reason.. If anyone know’s a fix that would be great :)

  105. It still amazes me that we’ve come all this way with CSS3 and we still can’t standardize on presentational code.

  106. An issue here is that when you put the gradient into a div, and do a border-radius onto it for IE (whether using IE9 beta standard support or a JS solution like curvy corner) the gradient is not stopped by the rounded edge so you end up with a the gradient display over the rounded border. Is there anyway around this??

  108. Thanx its awesome script. Gradient in IE was the major problem but using this sceript that problem is solved thanx a ton.. :)

  110. The style is working in ie7 perfectly but not in ie6.Do i need to have some other setting.

  111. Chikezie you complete and utter moron. You really should do a little reading before exposing your stupidity so openly.

  112. I was reading something else about this on another blog. Interesting. Your position on it is diametrically contradicted to what I read earlier. I am still contemplating over the opposite points of view, but I’m tipped heavily toward yours. And no matter, that’s what is so great about modernized democracy and the marketplace of thoughts on-line.

  117. Thank you for the useful information, however, you didn’t include how to differentiate between a horizontal or vertical gradient in IE: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=’#cccccc’, endColorstr=’#000000′); for horizontal, and replace the 1 with a 0 for vertical. Here’s my source: http://technet.microsoft.com/en-us/library/ee692647.aspx

    Thank you!

  118. To all those who can’t figure it out – it doesn’t work in Opera. O. does not support css gradient yet. This article is a bit flawed, for not mentioning this at all.

    You CAN get a nice gradient without a bitmap though, using SVG (w/h 100%/100% and a gradient of your choice) as a background-image. ;) If you use the same start/stop colors, it’ll look exactly the same as in webkit/Firefox using css3.

  120. Your post is very nice and insightful. Have just started implementing this feature.

  121. When you do article marketing, your intention is to increase the number of visitors to your website. It is not our abilities that show what we truly are, it is our choices. I have look for such a article for a long time

  124. Thanks for the demo. Maybe someday Exploder will render css correctly.

    I wonder how many thousands of hours have been wasted trying to get web sites to look right on this horrible, horrible browser . .

  126. Want to change your belove iphone 4 form black to white? Hmm, yes, so am I. but when will white iphone 4 available?

  127. I just heard the gossip that since there’s some technic problems on white iphone 4, iphone 4b is going to release. It that true？

  129. Does not work in IE 7–in fact in your example, the popout menus in the drop down do not display.

  130. your gradient code doesn’t work on on IE 8.
    Thanks for the great article thought.

  131. I had a beautiful gif background gradient on a very simple login page. Worked well with everything but Firefox. It was all striated! Yuk!

    Now it’s terrific in FF, IE, and Safari. Plain background in Opera and Google, but they don’t really matter for now.

    This code worked from the get-go. Fabulous. Thanks heaps!

    Max Williams (aka maxzebra)

  132. Thank u very much, i am upset for last 1 week thanks thanks……… this helped me greatly!

  133. This is something what I was finding from so many days and finaly got it here. It has been a great help of your that you have shared a great and helpful post here.

    Los Angeles Web Design

  134. use endColorstr=’white’ instead of endColorstr=’fff’.

    For some reason it likes to make white black.

  135. Following code for Firefox.
    background:url(“../logo.png”) no-repeat scroll 0 10px,-moz-linear-gradient(center top , #212327, #424448);

    I want to use background image and gradient both in IE.
    What is IE compatibiliity code for this?

  140. Brilliant, as usual. Well explained, the gradients worked fro me the first time. I am super ADD too so this is a big task. :)

  141. I must admit that I enjoyed reading your creative article as you did put pen and paper together to write such a flowing article

  143. Thanks for posting this article. I was almost ready to give up and go back to button images rather than gradients. You saved me a lot of time.

  144. Daniel — I think the problem is that IE doesn’t like it when you try to use the abbreviated 3 digit hexcode for the color, as compared to the full 6 digit code. Try ‘ffffff’ instead of ‘fff’ and it should work!

  146. This is a really great problem resolved, because cross-browsing it is a big issue at this point.
    But i don’t see how you can control the gradient’s dimensions, or -for instance – to repeat or not, to take 80% or 100% of background’s height – maybe you have an ideea?
    Tanks!

  147. i just visited this website right now and find it nice . the design, i was really amazed on how did they make it possible to build a site like this. is there a tutorial on how something like this site could made possible. example is this comments list. showing comments the way it shows here was really creative. is there some one who could give idea on how to build something like the way the comments shows here. the design was really amazing

  150. Really a great tutorial, i used this gradient effect. Thanks a lot dude!

  151. Wow, great tip! Thanks for sharing, using this for checkout buttons without images for my shopping system :D.

  153. really interesting gradient and the code works like a charm!
    this cross-browsing issue it’s a very sensitive one, i have a lot of trouble with all these versions of browsers…

  154. This article will prove useful to many people.
    However, the IE filter will only work for versions 5.5 to 7. You need the -ms prefixed version for IE8.
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#cccccc’, EndColorStr=’#000000′)”;

  155. This week Opera releases version 11.10 with css gradients support :)

    What about IE9 ??

  157. Your updated dropdown menu in the demo using CSS gradient is amazing!

  158. This article taught me how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Must read! From blog to blog!!!

  159. Dropdown menu looks cool in browsers. In IE9, li’s don’t take the border-radius, so they are plain rectangles.. Just another thing that is great but you cannot use it generally without a hack. Thank you, microsoft! Maybe in IE10.

  161. Thanks a lot! I had some display problems with Chrome but now they’re solved. You are my hero :D

    1. hey aleare, did chrome just automatically stop your gradient and begin again halfway down your page? if so how did you fix it? thanks :D

  162. Great information about the Gradient! Right to the point. I exactly needed this multibrowser gradient code.

    Thank yOu

  163. Fantastic! Thanx a mil. I would have tried x-repeating a pixel wide image, lol.

  164. Cheers for this, having some problems with firefox4 repeating a vertical gradient however.

  167. I can’t get webkit to render a gradient on the ≤html≥ level element. Is this to be expected? It works in FF and IE. How do I fix?

  170. Very nice. Especially the menu! Can’t wait to implement this on my site!

  171. hello ,
    My name is daniel and I own nigerian forum
    I’m an ardent reader of your posts and not just to leave leave without writing a comment this time around, I love the informations you share through this post especially where you wrote ” The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient. ”
    Keep it up friend.

  172. Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

  174. Anyone know when IE will step up to the plate and support color-stop, gradient angle, and radial gradient so we can do the cool menus in IE as well? First it was fonts and now this – so frustrating.

  176. This works perfectly, thank you. I would like to use it as the background of a website, which also uses a watermark image centered in the background, but it does not seem to be working. Is this not possible with a gradient?

  178. Really it is very useful for who are looking to implement gradients with using css. I love your site a lot Great combination of colors and font. Great trick. Thanks a lot

  180. Internet explorer gradient is not working in ie8. Other wise every thing is good.

    1. It might be due to the message ie8 displays above the website:

      “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options.”

      You need to accept the running of scripts and ActiveX controls in order to make it work.

      In case this does not work you can try a different approach with the use of -ms-filter instead of filter:

      -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′)”;

  181. This works great. Is it possible to implement two vertical gradients for a background? For example, Gradient1 is in the background to the left of the main content/body and Gradient2 would be to the right?

  182. How would you added transparency to the gradient?
    like have the top of the gradient black at 0.8 transparency and have the bottom of the gradient black at 0.2 transparency

    1. Try substituting the hex code for RGBA codes — i.e., RGBA(0,0,0,.8) for the .8 transparency black. Just a thought, not tested.

  183. For me this only worked in IE8 after adding width and height css attributes.
    Even if i use 100% IE8 required it :(

    But thanks for the code!

  184. This is all groovy and works perfectly, but interestingly the w3c CSS3 validator throws an error for gradient values attached to background-image, background-color, and background. Haven’t found a way around this and I’m just going to ignore it I suppose… I just love seeing the green “Congratulations!” bar when validating my markup and html :D

  185. What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

  186. Hy,
    Thank you for this article.
    It’s seems in Opera doesn’t work css gradient.

  187. Hi

    Thank you so much for this, it helped a lot; I’ve been looking all over the web for gradient backgrounds for quite a while!

    Thanks again

  189. Just a heads up on a typo under the “For Internet Explorer” section. You typed wlil instead of will.

    Cheers,
    D

  191. No, It does’t work in IE9. The Drop-shadow effect does not work in IE9. So this is not CROSS BROWSER at all!

    I am not sure why should someone use if it is not browser compliant?

  192. Thanks so much for giving everyone an extremely spectacular opportunity to read articles and blog posts from this web site. It is usually so excellent plus packed with amusement for me and my office mates to visit the blog at minimum 3 times in one week to read the new tips you will have. And of course, I’m actually motivated concerning the extraordinary principles you give. Certain 1 areas in this post are truly the most suitable I’ve had.

  193. just to let you know to add for IE10
    IE10 will be supporting gradients its the same as mozilla with the -moz but with -ms
    example below
    /*IE10*/
    background: -ms-linear-gradient(left top, #017AC1, #00bcdf);

    hope you found this helpfull

    1. Thanks Tim! I just tried our site on IE10 and was baffled by the whole gradient thing. Your info worked great!

  195. ihtiyaç kredisi
    ev kredi
    konut kredisi
    uygun kredi
    masrafsız kredi
    kredi oranları
    bireysel kredi
    masraf ücreti
    kredi hesaplama
    kredi hesaplama
    taşıt kredisi
    Tüketici kredisi

    1. To do this, you will need to add a GradientType parameter to the code. The default GradientType is 0, which is vertical. If you set it to 1, as below, it should be horizontal.

      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=’#cccccc’, endColorstr=’#000000′);

      Hope this helps out.

  198. works like a charm, i can manipulate from every corner of the div tag. f$$k internet explorer, didn’t tested yet. but far as i know, webkit scripts won’t be read. why MS , why ?

  202. Don’t follow these blindly anymore. All major browsers support official syntax for CSS gradients.

    Use something like:
    -webkit-linear-gradient(…)
    -moz-linear-gradient(…)
    -o-linear-gradient(…)
    -ms-linear-gradient(…)
    linear-gradient(…)

    No need for old webkit crap (unless you really want to stay compatible with old webkit).
    And “filter” might be useful too as IE supports CSS gradients from version 9 only.

  203. Agreed witz Diz, this solution is everything but cross-browser. It uses a filter for IE, and two vendor-specific prefixes for webkit and firefox … you cannot get any less cross-browser.

      1. I dunno, just putting the 3 lines in the post didn’t work in every browser for me, but after using Diz’s method it worked.

      2. Look at the date of the post before complaining that something doesn’t work. In the world of web browsers and CSS3 support, do you really expect a post that’s over a year old to still be completely valid?

  204. Thanks for the Gradient Tips I Used for an Tool Tip and it’s working fine.

  206. Best post, with using this trick I think no need to use ‘canvas’ tag of HTML5 if you want browser compatibility, cheeeeers.

  211. thank you! good post.
    have a quick question. is it possible to load a image if the browser is non css type? and how to do it? thank you again!

  215. Here’s a complete example;

    background: #e0e0e0;
    background: -moz-linear-gradient(top, #e0e0e0 0%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#fff));
    background: -webkit-linear-gradient(top, #e0e0e0 0%,#fff 100%);
    background: -o-linear-gradient(top, #e0e0e0 0%,#fff 100%);
    background: -ms-linear-gradient(top, #e0e0e0 0%,#fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e0e0e0′, endColorstr=’#fff’,GradientType=0 );
    background: linear-gradient(top, #e0e0e0 0%,#fff 100%);

  218. That’s a great step-by-step tutorial. Thanks for sharing your knwledge!

  219. Im trying to apply a gradient as a background to a table row but this does not seem to work in IE. My implementation does not allow me to use a gradient image. Any suggestions please

    1. No mention of Opera’s approach. A shame to see another dev article ignoring what is a solid and very innovative browser.

      1. Solid and innovative, fine, but it has about the same market percentage right now as IE6.

      2. But as of now, around maybe 50 percnet (it was either 46 or 53, can’t remember) of internet users are using IE. I don’t like IE, but people still use (can’t imagine why, but OK, since most people don’t change browsers, and others actually ‘like’ IE….but I’m not here to judge….just give you the numbers) it.

      3. Many people still use IE b.c it is the internet browser that comes already on the CPU’s … BOOO!!! My fav is Flock (Firefox) =D

      4. Opera’s layout engine appears to render just fine, whether it picks up the Mozilla or Webkit directions for layout. I wouldn’t worry too much; maybe it wasn’t worth a mention because Presto just works.

  222. great , just great

    worked perfectly.

    now to find a rounded corners hack for IE.

    G

      1. Gradient for all browser

        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
        background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
        background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#3b89c5′, endColorstr=’#124f7e’); /* for IE */
        background-color:#124f7e;

      2. Gradient for ALL browsers:

        background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
        background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
        background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: linear-gradient(top, #ee5f5b, #c43c35);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ee5f5b’, endColorstr=’#c43c35′, GradientType=0);

  224. Rounded corners are easily created in IE9 as in the following line of css example:

    box{
    border-radius:15px; //for IE9 and Opera
    -moz-border-radius:15px; //for firefox
    }

    Try on other browsers to see how it works.

  230. thanks… very helpful for seasons greeting background let me try this…

  231. Yes all this works on the latest browsers, however I need to find something compliant for ALL browsers and versions. Try putting gradients on IE6. pfft.. IE is super gay…. damn you microsoft, damn you.. Any one have any ideas?

  232. Oh and pie will eventually give you problems down the way, and modinizir is useless too…….

  233. Thanks! I have been wrapped in an IE form nightmare and couldn’t get IE9 to accept any background color to the input fields until I ran across this fix. Now I have not just a color but a gradient. You rock!

  234. Thanks! this was helpful. How do a get the gradient to appear from left to right for IE?

  235. I have a piece of code in my site that uses the gradient code and I can’t work out how to make it compatible with Chrome. I have tried various codes but am not having any luck. Can anyone help?

    http://netstorepro.com/digthis/book-now

    Specifically, I am having problems with the button:

    #griddler .button {
    background: -moz-linear-gradient(center top , #53CC13 0%, #4CBF10 49%, #3FBA00 50%, #3BB000 100%) repeat-x scroll 0 0 #3BB000;
    }

    and the the background of the pricing area.

  238. Hey Mitya I just saw this and coded it for Opera…background: -o-linear-gradient(top, #06F, #006); Note that these were my color choices. Good point though.

  241. Opera browser was missed,
    i use this for all browsers, tested on :
    IE 8.0 , FireFox 12.0 , Chrome 18.0 , Opera 12.0

    background-color:#55aacc;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#55aacc’,endColorstr=’#ffffff’,GradientType=0);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ac), color-stop(100%,#fff));
    background: -moz-linear-gradient(top,#5ac,#fff);
    background-image: -o-linear-gradient(#5ac,#fff);

  242. Very nice. Any idea on how to do cross background gradients and also use a background image?

  243. Is there a way to control when the gradient effect begins and where it ends? I want it to make the transfer earlier…

    Thanks,
    Oren

    1. I tested this:

      mozilla-> background: -moz-linear-gradient(50px, #FFF, #000);
      result:
      the gradient starts at 50th pixel from left to right
      1st pixel->#FFF background color ->50th pixel -> gradient to the right end of the element
      —————————————————————————————————-
      Chrome
      background: -webkit-gradient(linear, 0 120, 0 180, from(#F00), to(#000));
      result:
      linear gradient from top to bottom -> first 120 pixels are #F00, from 121px to 179px is the gradient, then from 180px to the end of the element the color is #000
      —-
      background: -webkit-gradient(linear, 120 0 , 180 0, from(#F00), to(#000));
      result:
      same as above, but from left to right

      1. So how would I do a gradient from top to bottom so that the bottom gradient starts at 50% for -moz? If I set -moz-linear-gradient(50%, #FFF, #000); it is from left to right, but I want it to go from top to bottom…

      2. Hi Bianca, in case you’re still looking for a solution, simply inform at what point you want the gradient to start (the XX%):
        background: -moz-linear-gradient(top, #cccccc XX%, #ffffff);

  244. What if I wanted to have two gradients on the same element… Taking the example above, what if I wanted to extend it by having white gradient into black on the top AND bottom? Is this even possible?

    1. /* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
      background: linear-gradient(top, blue, white 80%, orange);

      mizilla 10
      /* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
      background: linear-gradient(to bottom, blue, white 80%, orange);

    2. background-image: linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -o-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -moz-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -webkit-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -ms-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);

      background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.47, #000000),
      color-stop(0.74, #00FF00),
      color-stop(0.87, #FFFFFF)
      );

    1. As I told to Rich:
      background-image: linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -o-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -moz-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -webkit-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
      background-image: -ms-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);

      background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.47, #000000),
      color-stop(0.74, #00FF00),
      color-stop(0.87, #FFFFFF)
      );

  247. This is awesome. No more need for a big image editing program!

  252. One big thing which is missing is from this article which you can do these days is stacking of multiple image values (aka gradients) in a single background.

    For example:
    background-image: linear-gradient(left, rgba(0,0,255,0), rgba(0,0,255,1)), linear-gradient(top, #FFF, #000);

    If you want to explore the potential of multi-layered gradients check out:
    http://glan.github.com/CSS-Patterns-Workbench/#2301441 (use a webkit browser).

    and

    lea.verou.me/css3patterns/

  253. This doesn’t work quite as expected when applied to the body element:

    body {
    background: #F00000; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #FFFFFF, #000000); /* for firefox 3.6+ */
    margin:0;
    height:100%;
    width:100%;
    }

    In Chrome, I get a gradient down to the end of whatever is filling the body, then it repeats the gradient until the bottom of the window. Is there a way to extend the gradient to the bottom regardless of the content? And also to have it be similar to a background url in a no-repeat fashion so the gradient covers the current window size, and the content of the page can scroll without scrolling the gradient? Currently, I can do this with a some javascript, but it would be nice if it worked with the CSS styles.

    Example of issue @ http://tamaratemple.com/cgi-bin/gradient-example.cgi

    1. Same problem for me. It seems fine the first second but when my website are fully loaded the gradient starts to divide. :(

  255. I came across the weirdest effect with this gradient application. when applied IE8 creates kind of a “knockout” effect on my text. in otherword i can see right through my text to the background image.

    iam creating flip cards with css3 trasition and animation. and when the card flips there are buttons on the back of the card the buttons have a class applied to it with the gradient. and white text. but the text and border creates the knockout effect in ie8….. any suggestions on what my be causing this?

  256. Thanks for article. I used your filter code for Explorer and I can now see my gradient background in my header. I inserted the filter code into my footer CSS b/c it also uses a gradient background, but some reason it’s not showing up still on Explorer.

    Any idea’s?

  258. Sorry guys, but how do i apply the ie code so that the gradient goes from left to right instead of top to bottom. Any help would be greatly appreciated. Thanks.

  263. Hi, I loved your site.
    I want to create a linear gradient for the background/viewport. I am able to successfully do the linear gradient in divs. and other such containers. Mt problem is how to make the linear gradient stretch in the background
    Thanks

    1. You can apply the background in the body tag like:

      body{
      …Your gradient background css code here :)
      }

    2. The problem with background gradients is often that they must either be a fixed width (100%) or must be set to auto, which then ruins the relative size-ability of its child divs. My solution was to give ALL parents a 100% height, starting with
      html,body { position:absolute; top:0; left:0; height:100%; width:100%; /* and gradient goes here */
      }
      Once this is set, the gradient starts over after 100%, so to keep everything contained
      .body_double {
      height:100%;
      width:100%;
      overflow:scroll; /* the fun begins!!! */
      overflow-x:hidden; /* no thanks, sideways scroll */
      }
      .container { /* parent div to all percentage-sized contents. */
      width:90%;
      HEIGHT:98%; /* now I can safely place a 2% height footer, outside of this div, that stays at the bottom of .body_double */
      margin:0 auto;
      float:none;
      text-align:center /* for IE centering */
      }
      .MainLeft { /*first child to .container*/
      position:relative;
      HEIGHT:100%;
      width:66.666667%;
      float:left;
      clear:left;
      }
      .MainRight { /*second child to .container*/
      position:relative;
      HEIGHT:100%;
      width:33.333%;
      float:left;
      }

      Footer goes outside of .container and has a 2% height, but remains within .body_double, your gradient is fixed while appearing fluid, and your page scrolls at the y-axis. THE ONLY Setback I can find, is that a scroll bar is inevitable. So far, this is the best answer I can find for a background gradient at 100% while also maintaining a re-sizable child div. Anybody who knows an easier way is my hero.

      2. I take it back. That was a stupid solution. Against my own will, I tried a fixed position background image (1px by 1800px) repeat-x, using the background-size:contain rule. Much more success. The fixed position image in the background allows inner divs to be any length, because it stays as the full-size background no matter how scroll works.

  264. I tried using your pure css navigation bar and the colors when you hover over something or when a button is set to current does not work in Google Chrome. Is there a remedy to this?

  265. Hi,

    I left a comment a couple of months ago regarding a program I’ve written that can generate the CSS and SVG code for all possible CSS linear and radial gradients.

    The good news is, I’ve since learnt Javascript and converted the program to an online web app at visualcsstools.com.

    You will need a modern browser to view the page. If you use IE, you’ll need IE9+, which can handle SVG graphics. If you have the IE10 preview, you’ll be able to see the output in both CSS and SVG.
    All other browser users should be fine assuming that your browser version is pretty much up to date.

    If you have any comments, then please email me at the address provided on the web page.

    Cheers,
    Jules

  271. hi, i want gradient to be supported by all browser types.
    Please help me.
    thanks.

  275. what if you what a gradient with multiple colors? How do you put that into the code?

  276. Yay finally found a code that works in all browsers – been having a hell of a morning trying to get this figured out. Thanks :)

  277. The good news is, I’ve since learnt Javascript and converted the program to an online web app at visualcsstools.com.

    You will need a modern browser to view the page. If you use IE, you’ll need IE9+, which can handle SVG graphics. If you have the IE10 preview, you’ll be able to see the output in both CSS and SVG.
    All other browser users should be fine assuming that your browser version is pretty much up to date.

    If you have any comments, then please email me at the address provided on the web page.

  282. That is awesome. Thanks so much for posting that. I was just about to get into photoshop to create the old school gradiant image that is a nightmare when vertical as it’s never the right length and I thought to myself, now that was years ago we had to do that. Perhaps there is a CSS technique by now. And there you were, thanks mate

    Rich

  283. Thanks so much for posting that. I was just about to get into photoshop to create the old school gradiant image that is a nightmare when vertical as it’s never the right length and I thought to myself, now that was years ago we had to do that.

  286. Thanks for the great advice and tutorial! I did find that Opera was left out of the picture and the same gradient effect is achievable via:

    background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* Opera CSS3 */

    Thanks!

  292. tyty. was just about to revert to using a photoshop gradient image as a background which likely would of looked horrible and taken much more time :s

  293. Thanks for this. I got the gradient css for IE to show up, however, it does not validate under the W3C standards.

  296. However, in IE, the background won’t stay fixed, extends the length of the body and doesn’t seem to respond to the background-position 0px 100px. Any advice on a workaround would be greatly appreciated.

  297. hello sir
    i really like the CSS site
    thanks for sharing this blog
    thanks

Comments are closed on this article.